<%@page import="bean.funcionarioBean"%>
<%@page import="util.TimeZoneUtil"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="dao.clienteDao"%>
<%@page import="bean.clienteBean"%>
<%@page import="java.util.List"%>
<%@page import="conexao.Conexao"%>
<%@page import="java.sql.Connection"%>
<%@page import="dao.funcionarioDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="menu.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.ui-combobox {
	position: relative;
	display: inline-block;
}
.ui-button-combobox {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0;
	/* adjust styles for IE 6/7 */
	*height: 1.7em;
	*top: 0.1em;
}
.ui-autocomplete-input {
	margin: 0;
	height: 20px;
	width: 270px;
}
</style>
<script>
	$(function() {
		
		$( "#porCliente form select" ).combobox();

		$("#tipoRelatorio").change(function() {
			$("#relatorio").html("");
			var tipo = $(this).val();
			if (tipo == "relatorioPorSecretario") {
				$("#porDesigner").hide();
				$("#porCliente").hide();
				$("#ComissaoPorDesigner").hide();
				$("#osfinalizado").hide();
				$("#osaberto").hide();
				$("#porSecretario").show();
			}
			if (tipo == "relatorioPorDesigner") {
				$("#porSecretario").hide();
				$("#porCliente").hide();
				$("#ComissaoPorDesigner").hide();
				$("#osfinalizado").hide();
				$("#osaberto").hide();
				$("#porDesigner").show();
			}
			if (tipo == "relatorioPorCliente") {
				$("#porSecretario").hide();
				$("#porDesigner").hide();
				$("#ComissaoPorDesigner").hide();
				$("#osfinalizado").hide();
				$("#osaberto").hide();
				$("#porCliente").show();
			}
			if (tipo == "ComissaoPorDesigner") {
				$("#porSecretario").hide();
				$("#porDesigner").hide();
				$("#porCliente").hide();
				$("#osfinalizado").hide();
				$("#osaberto").hide();
				$("#ComissaoPorDesigner").show();
			}
			if (tipo == "osFinalizado") {
				$("#porSecretario").hide();
				$("#porDesigner").hide();
				$("#porCliente").hide();
				$("#ComissaoPorDesigner").hide();
				$("#osaberto").hide();
				$("#osfinalizado").show();
			}
			if (tipo == "osAberto") {
				$("#porSecretario").hide();
				$("#porDesigner").hide();
				$("#porCliente").hide();
				$("#ComissaoPorDesigner").hide();
				$("#osfinalizado").hide();
				$("#osaberto").show();
			}
		});

		$("#relatorioPorEntidade button").button().live("click", function() {
			var form = null;
			if ($("#porSecretario").is(":visible")) {
				var select = null;
				 $("#porSecretario form select option:selected").each(function() {
					select = $(this).val();
				 });
				 if(select == ""){  
				 	$("#relatorio").html("Selecione um secretário(a).");
				 	return false;
				 }
				form = $("#porSecretario form").serialize();
			} else if ($("#porDesigner").is(":visible")) {
				var select = null;
				 $("#porDesigner form select option:selected").each(function() {
					select = $(this).val();
				 });
				 if(select == ""){  
				 	$("#relatorio").html("Selecione um Designer.");
				 	return false;
				 }
				form = $("#porDesigner form").serialize();
			} else if ($("#porCliente").is(":visible")) {
				var select = null;
				 $("#porCliente form select option:selected").each(function() {
					select = $(this).val();
				 });
				 if(select == ""){  
				 	$("#relatorio").html("Selecione um Cliente.");
				 	return false;
				 }
				form = $("#porCliente form").serialize();
			}
			else if ($("#ComissaoPorDesigner").is(":visible")) {
				var select = null;
				 $("#ComissaoPorDesigner form select option:selected").each(function() {
					select = $(this).val();
				 });
				 if(select == ""){  
				 	$("#relatorio").html("Selecione um Designer.");
				 	return false;
				 }
				form = $("#ComissaoPorDesigner form").serialize();
			}
			else if ($("#osfinalizado").is(":visible")) {
				form = $("#osfinalizado form").serialize();
			}
			else if ($("#osaberto").is(":visible")) {
				form = $("#osaberto form").serialize();
			}
			

			$.ajax({
				url : "relatorio",
				data : form,
				beforeSend : function() {
					$("#relatorio").html("Carregando...");
				},
				success : function(html) {
					if(html != ""){
						$("#relatorio").html(html);
					}else{
						$("#relatorio").html("");
						window.open("relatorios/relatorio.pdf");
					}
				},
				error:function(){
					$("#relatorio").html("Erro de conexão!");
				}
			});
			return false;
		});

		$("#tipoMedia").change(function() {
			$("#ResultadoMedia").html("");
			var tipo = $(this).val();
			if (tipo == "mediaTempoOs") {
				$("#mediaOsDesigner").hide();
				$("#mediaOS").show();
			}
			if (tipo == "mediaTempoOsDesigner") {
				$("#mediaOS").hide();
				$("#mediaOsDesigner").show();
			}

		});

		$("#relatorioMedia button").button().click(function() {
			var form = null;

			if ($("#mediaOS").is(":visible")) {
				form = $("#mediaOS form").serialize();
			} else if ($("#mediaOsDesigner").is(":visible")) {
				var select = null;
				 $("#mediaOsDesigner form select option:selected").each(function() {
					select = $(this).val();
				 });
				 if(select == ""){  
				 	$("#ResultadoMedia").html("Selecione um Designer.");
				 	return false;
				 }
				form = $("#mediaOsDesigner form").serialize();
			}

			$.ajax({
				url : "mediaOs",
				data : form,
				beforeSend : function() {
					$("#ResultadoMedia").html("Carregando...");
				},
				success : function(html) {
					$("#ResultadoMedia").html(html);
				}
			});
			return false;
		});

		$("#porSecretario form input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#porDesigner form input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#porCliente #periodo input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#mediaOS input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#mediaOsDesigner input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#ComissaoPorDesigner input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#osfinalizado input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#osaberto input:text").datepicker({
			regional : "pt-BR",
			"showAnim" : "slideDown",
			onClose : function() {

			}
		});
		$("#porSecretario font").click(function(){
			if(!$("#porSecretario input:checkbox").is(":checked")){
				$("#porSecretario input:checkbox").attr("checked", true);
			}else{
				$("#porSecretario input:checkbox").attr("checked", false);
			}
		});
		$("#porDesigner font").click(function(){
			if(!$("#porDesigner input:checkbox").is(":checked")){
				$("#porDesigner input:checkbox").attr("checked", true);
			}else{
				$("#porDesigner input:checkbox").attr("checked", false);
			}
		});
		$("#porCliente font").click(function(){
			if(!$("#porCliente input:checkbox").is(":checked")){
				$("#porCliente input:checkbox").attr("checked", true);
			}else{
				$("#porCliente input:checkbox").attr("checked", false);
			}
		});
		$("#ComissaoPorDesigner font").click(function(){
			if(!$("#ComissaoPorDesigner input:checkbox").is(":checked")){
				$("#ComissaoPorDesigner input:checkbox").attr("checked", true);
			}else{
				$("#ComissaoPorDesigner input:checkbox").attr("checked", false);
			}
		});
	});
</script>
</head>
<body>
	<fieldset class="ui-corner-all"
		style="margin-top: 10px; padding-top: 0px; height: 330px;">
		<legend class="ui-corner-all" style="font-size: 14px;">Relatórios</legend>

		<table width="100%" border="0" cellpadding="0" cellspacing="0"
			style="height: 310px;">
			<tr>
				<td id="relatorioPorEntidade"
					style="vertical-align: top; width: 50%; border-right: 1px solid #999;">
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<br /> Relatório.: <select id="tipoRelatorio">
						<option value="relatorioPorSecretario">OS por
							Secretário(a)</option>
						<option value="relatorioPorDesigner">OS por Designer</option>
						<option value="relatorioPorCliente">OS por Cliente</option>
						<option value="ComissaoPorDesigner">Comissão por Designer</option>
						<option value="osFinalizado">OS Finalizado</option>
						<option value="osAberto">OS em Aberto</option>
				</select> <br />
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="porSecretario" style="width: 500px;">
						<fieldset class="ui-corner-all"
							style="margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Relatório
								de OS por Secretário(a)</legend>
							<br />
							<form>
							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td width = 350>
										<input type="hidden" name="tipoRelatorio" value="relatorioPorSecretario">
										<%
											SimpleDateFormat df = new SimpleDateFormat("dd/MM;yyyy"); 
											String dataMes = new TimeZoneUtil().getDataLocalMenosUmMes();
											String dataHoje = new TimeZoneUtil().getDataLocal();
										%>
											De.:<input type="text" name="dataInicial" size="10" value="<%=dataMes%>"> 
											Até.:<input type="text"	name="dataFinal" size="10" value="<%=dataHoje%>">
											<p />
											Secretário(a).:
											<select name="id">
											<%
												funcionarioBean func = new funcionarioBean();
												func.setIdEmpresa(sessaoIdEmpresa);
												func.setIdFuncao(1);
												List<funcionarioBean> sec = new funcionarioDao()
														.getListFuncionarioFuncao(conn, func);
												for (int i = 0; i < sec.size(); i++) {
											%>
											<option value="<%=sec.get(i).getId()%>"><%=sec.get(i).getNome()%></option>
											<%
												}
											%>
										</select>
									</td>
									<td style="vertical-align: top;"> 
										<input type="checkbox" checked="checked" name="situacao" value="finalizado" style="cursor: pointer;"><font style="cursor: pointer;">OS Finalizado</font><br/>
									</td>
								</tr>							
							</table>
							</form>
						</fieldset>
					</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="porDesigner" style="display: none; width: 500px;">
						<fieldset class="ui-corner-all"
							style="margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Relatório
								de OS por Designer</legend>
							<br />
							<form>
							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td width = 350>
										<input type="hidden" name="tipoRelatorio"
											value="relatorioPorDesigner"> De.:<input type="text"
											name="dataInicial" size="10" value="<%=dataMes%>"> Até.:<input type="text"
											name="dataFinal" size="10" value="<%=dataHoje%>">
										<p />
										Designer.: <select name="id">
											<%
												func.setIdFuncao(2);
												List<funcionarioBean> des = new funcionarioDao()
														.getListFuncionarioFuncao(conn, func);
												for (int i = 0; i < des.size(); i++) {
											%>
											<option value="<%=des.get(i).getId()%>"><%=des.get(i).getNome()%></option>
											<%
												}
											%>
										</select>
									</td>
									<td style="vertical-align: top;"> 
									
										<input type="checkbox" checked="checked" name="situacao" value="finalizado" style="cursor: pointer;"><font style="cursor: pointer;">OS Finalizado</font><br/>
									</td>
								</tr>
							</table>
							</form>
						</fieldset>
					</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="porCliente" style="display: none; width: 500px;">
						<fieldset class="ui-corner-all"
							style="margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Relatório
								de OS por Cliente</legend>
							<br />
							<form>
							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td width = 350>
										<input type="hidden" name="tipoRelatorio"
											value="relatorioPorCliente"> 
										<div id="periodo">
											De.:<input type="text" name="dataInicial" size="10" value="<%=dataMes%>">
											Até.:<input type="text"	name="dataFinal" size="10" value="<%=dataHoje%>">
										</div>
										<p />
										Cliente.: <select name="id">
										<option value=""></option>
											<%
											clienteBean cliente = new clienteBean();
											cliente.setIdEmpresa(sessaoIdEmpresa);
											List<clienteBean> cli = new clienteDao().getLista(conn, cliente);
												for (int i = 0; i < cli.size(); i++) {
											%>
											<option value="<%=cli.get(i).getId()%>"><%=cli.get(i).getNome()%></option>
											<%
												}
											%>
										</select>
									</td>
									<td style="vertical-align: top;"> 
									
										<input type="checkbox" checked="checked" name="situacao" value="finalizado" style="cursor: pointer;"><font style="cursor: pointer;">OS Finalizado</font><br/>
									</td>
								</tr>
							</table>
							</form>
						</fieldset>
					</div> 
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="ComissaoPorDesigner" style="display: none; width: 500px;">
						<fieldset class="ui-corner-all"
							style="margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Comissão por Designer</legend>
							<br />
							<form>
							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td width = 350>
										<input type="hidden" name="tipoRelatorio"
											value="relatorioComissao"> De.:<input type="text"
											name="dataInicial" size="10" value="<%=dataMes%>"> Até.:<input type="text"
											name="dataFinal" size="10" value="<%=dataHoje%>">
										<p />
										Designer.: <select name="id">
											<%
												func.setIdFuncao(2);
												List<funcionarioBean> desi = new funcionarioDao()
														.getListFuncionarioFuncao(conn, func);
												for (int i = 0; i < desi.size(); i++) {
											%>
											<option value="<%=desi.get(i).getId()%>"><%=desi.get(i).getNome()%></option>
											<%
												}
											%>
										</select>
									</td>
									<td style="vertical-align: top;"> 
									
										<br/>
									</td>
								</tr>
							</table>
							</form>
						</fieldset>
					</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="osfinalizado" style="display: none; width: 500px;">
						<fieldset class="ui-corner-all"
							style="margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px; height: 124px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Relatório de OS Finalizado</legend>
							<br />
							<form>
							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td width = 350>
										<input type="hidden" name="tipoRelatorio"
											value="osFinalizado"> De.:<input type="text"
											name="dataInicial" size="10" value="<%=dataMes%>"> Até.:<input type="text"
											name="dataFinal" size="10" value="<%=dataHoje%>">
											<p/>
									</td>
									<td style="vertical-align: top;"> 
										<br/>
									</td>
								</tr>
							</table>
							</form>
						</fieldset>
					</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="osaberto" style="display: none; width: 500px;">
						<fieldset class="ui-corner-all"
							style="margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px; height: 124px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Relatório de OS em Aberto</legend>
							<br />
							<form>
							<table border="0" cellpadding="0" cellspacing="0">
								<tr>
									<td width = 350>
										<input type="hidden" name="tipoRelatorio"
											value="osAberto"> De.:<input type="text"
											name="dataInicial" size="10" value="<%=dataMes%>"> Até.:<input type="text"
											name="dataFinal" size="10" value="<%=dataHoje%>">
									</td>
									<td style="vertical-align: top;"> 
										<br/>
									</td>
								</tr>
							</table>
							</form>
						</fieldset>
					</div>
					<br />
					<button>Gerar Relatório</button>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<p />
					<div id="relatorio"></div></td>
				<td id="relatorioMedia"
					style="vertical-align: top; padding-left: 10px;"><br />
					Média.: <select id="tipoMedia">
						<option value="mediaTempoOs">Tempo gasto para concluir OS</option>
						<option value="mediaTempoOsDesigner">Tempo que o designer
							leva para criar uma arte</option>
				</select>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="mediaOS">
						<fieldset class="ui-corner-all"
							style="width: 450px; height: 130px; margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Média
								de Tempo Gasto para concluir OS</legend>
							<br/>
							<form>
								<input type="hidden" name="tipoMedia" value="mediaTempoOs">
								De.:<input type="text" name="dataInicial" size="10" value="<%=dataMes%>">
								Até.:<input type="text" name="dataFinal" size="10" value="<%=dataHoje%>">
							</form>
						</fieldset>
					</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<div id="mediaOsDesigner" style="display: none;">
						<fieldset class="ui-corner-all"
							style="width: 450px; height: 130px; margin-top: 10px; margin-right: -3px; box-shadow: 2px 5px 12px #555; border: 0px;">
							<legend class="ui-corner-all" style="font-size: 14px;">Média
								de Tempo que o Desinger Gasta para Concluir OS</legend>
							<br/>
							<form>
								<input type="hidden" name="tipoMedia"
									value="mediaTempoOsDesigner"> De.:<input type="text"
									name="dataInicial" size="10" value="<%=dataMes%>"> Até.:<input type="text"
									name="dataFinal" size="10" value="<%=dataHoje%>">
								<p>
									Designer.: <select name="id">
										<%
											func.setIdFuncao(2);
											List<funcionarioBean> desig = new funcionarioDao()
													.getListFuncionarioFuncao(conn, func);
											for (int i = 0; i < desig.size(); i++) {
										%>
										<option value="<%=desig.get(i).getId()%>"><%=desig.get(i).getNome()%></option>
										<%
											}
										%>
									</select>
								<p/>
							</form>
							
						</fieldset> 
					</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
					<br/>
						<button>Calcular Média</button>
					<p>
						<div id="ResultadoMedia"></div>
					</p>
				</td>
			</tr>
		</table>
	</fieldset>
	<%conn.close(); %>
</body>
</html>